/*
Copyright 2011 Saiyasodharan (http://saiy2k.blogspot.com/)

This file is part of SpiroCanvas (http://code.google.com/p/spirocanvas/)

SpiroCanvas is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

SpiroCanvas is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with SpiroCanvas.  If not, see <http://www.gnu.org/licenses/>.
*/

body
{
	background-color: 		#000000;
	font-family:			georgia;
	font-size:				12px;
	color:					#566669;
	background-image:		url('images/spiroBGBlue.jpg');
	background-repeat:		no-repeat;
	font:					12px arial;
	overflow:				hidden;
}
a
{
	color:					#ddddff;
}

#canvasContainer
{
	width:					800px;
	height:					600px;
	margin:					auto;
	border:					2px solid #094965;
}

#layersPanelSelectable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#layersPanelSelectable li { margin: 0 1px 1px 1px; padding: 0.4em; padding-left: 0.5em; height: 18px; }
#layersPanelSelectable li span { position: absolute; margin-left: -1.3em; }
#layersPanelSelectable .ui-selecting { background: #FECA40; }
#layersPanelSelectable .ui-selected { background: #F39814; color: white; }

.toolBox
{
	float:					left;
	width:					150px;
	padding:				4px;
	background-color:		#062129;
	text-align:				center;
}
.toolBoxRight
{
	float:					right;
	width:					140px;
	padding:				4px;
}

.toolBoxHorizontalPanel
{
	color:					#aaa;
	width:					129px;
	margin:					0px 2px 0px 2px;
	border-left:			1px solid #265a67;
	border-right:			1px solid #265a67;
	padding:				10px 2px 0px 2px;
	background-color:		#0a323c;
}

.toolBoxHorizontalHeader
{
	color:					#ddd;
	width:					134px
	height: 				25px;
	margin:					0px 2px 0px 2px;
	padding:				0px 2px 0px 2px;;
	background-image:		url('images/toolHeader.png');
	background-repeat:		no-repeat;
	font-weight:			bold;
}

.toolPanel
{
	position:				absolute;
	width:					206px;
	z-index:				100;
}
.toolPanelRight
{
	position:				absolute;
	width:					206px;
	z-index:				100;
}

.toolBoxHeader
{
	float:					right;
	padding: 				1px;
	font:					12px arial;
	cursor				:	pointer;
}

.toolBoxHeaderRight
{
	float:					left;
	padding: 				1px;
	font:					12px arial;
	cursor				:	pointer;
}

#statusDiv
{
	position:				absolute;
	bottom:					0px;
	left:					0px;
	right:					0px;
	height:					43px;
	text-align:				center;
	display:				inline;
}
#statusRightPanel
{
	margin:					auto;
}
#statusLeftPanel
{
	float:					left;
}

.statusButton
{
	width:					119px;
	height:					43px;
	text-align:				center;
	text-decoration:		none;
	font:					18px arial;
	color:					#888888;
	font-variant:			small-caps;
	padding-top:			12px;
}

.controlButton
{
	margin-top:				-3px;
	width:					55px;
	font:					12px arial;
	color:					#7fdcff;
	background-color:		#023A4F;
	display:				inline-block;
	text-align:				center;
	padding:				2px;
	border:					1px solid #09698d;
	border-bottom:			none;
	position:				absolute;
	top:					480px;
}

.controlButton:hover
{
	background-color:		#000000;
}

#saveButton
{
	background-image:		url('images/button1.png');
	background-repeat:		no-repeat;
}
#saveButton:hover
{
	background-image:		url('images/button1S.png');
}

#randomButton
{
	background-image:		url('images/button2.png');
	background-repeat:		no-repeat;
}
#randomButton:hover
{
	background-image:		url('images/button2S.png');
}

#shareButton
{
	background-image:		url('images/button3.png');
	background-repeat:		no-repeat;
}
#shareButton:hover
{
	background-image:		url('images/button3S.png');
}

#advancedHeader
{
	width:					46px;
	height:					499px;
	background-image:		url('images/advancedHeader.png');
	background-repeat:		no-repeat;
}

#layersHeader
{
	width:					46px;
	height:					499px;
	background-image:		url('images/layersHeader.png');
	background-repeat:		no-repeat;
}

.ui-widget-content
{
	font:					14px arial;
}

#socialDialog
{
	position:				absolute;
	width:					300px;
	height:					60px;
	background-color:		#000;
	border:					2px solid #094965;
	padding:				5px;
}
